<template>
  <div>
    <transition name="sidebar">
      <div class="sidebar main right-box" id="sidebar-main" v-show="sidebarShow">
        <div class="wrapper">
          <nav>
            <ul class="menu vertical first-menu">
              <li v-for="(menu, index) in menuList" :key="index" @click="menuClick(index, menu.url)" :class="{active:menuIndex==index || menu.url==$route.path || (menu.subUrl && menu.subUrl.indexOf($route.name)>-1) && !menuYClick}">
                <a @click="$router.replace(menu.url)">{{menu.name}}<span class="san" v-if="menu.sub"></span></a>
                <ul v-if="menu.sub" class="menu vertical sub-menu" v-show="(menuIndex==index && subMenu) || (menu.subUrl && menu.subUrl.indexOf($route.name)>-1 && !menuYClick)">
                  <li v-for="(submenu, subIndex) in menu.sub" :key="subIndex" @click.stop="subMenuClick(subIndex+'-'+index, submenu.url)" :class="{active:subMenuIndex==subIndex+'-'+index || (submenu.url==$route.path && !subMenuYClick) || ($route.path=='/' && submenu.url=='/msite')}">
                    <a @click="$router.replace(submenu.url)">{{submenu.name}}</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </transition>
    <div class="head">
      <div class="grid-x">
        <div class="small-7">
          <img src="../../../static/images/logo.png" class="logo-img"/>
        </div>
        <div class="small-4 text-right search-box">
          <a class="search-but center-t " data-open='modal' @click="search"> 搜索</a>
        </div>
        <div class="small-1">
          <button class="menu-but" id="sidebar-main-trigger" @click="showSidebar"></button>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskShow" @click="showSidebar"></div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {MessageBox} from 'mint-ui';

  export default {
    name: "Header",
    data() {
      return {
        maskShow: false,
        sidebarShow: false,
        menuIndex: '-1',
        subMenuIndex: '',
        subMenu: true,
        menuYClick: false,
        subMenuYClick: false
      }
    },
    mounted() {
      // 获取菜单列表
      this.$store.dispatch('getMenuList');
    },
    methods: {
      search() {
        let {inputValue} = this;
        let searchTitle = '<div style="text-align: left;"><img src="static/images/search-on.png" style="width:17px;height:17px;margin-right:5px;"/>快速搜索</div>';
        MessageBox.prompt(searchTitle, '', {
          showCancelButton: false,
          confirmButtonText: '搜索',
          confirmButtonClass: 'red-but',
        }).then(({value}) => {
          if (value != null && value != '') {
            console.log(value);
          }
        });
      },
      showSidebar() {
        let {maskShow, sidebarShow} = this;
        this.maskShow = !this.maskShow;
        this.sidebarShow = !this.sidebarShow;
      },
      menuClick(index, curUrl) {
        let {menuIndex} = this;
        if (menuIndex == index) {
          this.subMenu = !this.subMenu;
        } else {
          this.subMenu = true;
        }
        this.menuIndex = index;
        this.menuYClick = true;
        if(curUrl == this.$route.path){
          this.showSidebar();
        }
      },
      subMenuClick(index, curUrl) {
        this.subMenuIndex = index;
        this.subMenuYClick = true;
        if(curUrl == this.$route.path){
          this.showSidebar();
        }
      },
    },
    computed: {
      ...mapState(['menuList']),
    }
  }
</script>

<style scoped>
  .sidebar {
    position: fixed;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    z-index: 3000;
  }

  .sidebar-enter-active, .sidebar-leave-active {
    transition: all .3s;
    transform: translate(-100% -100%);
  }

  .sidebar-enter, .sidebar-leave-to {
    opacity: 0;
    transform: translate(100%, 0);
  }

  .mask {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 2999;
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
  }
</style>
